.sg-alert {
  --sg-alert-padding: 8px 16px;
  --sg-alert-bg-color: var(--sg-fill-color-blank);
  --sg-alert-text-color: var(--sg-text-color-regular);
  --sg-alert-border-radius-base: var(--sg-border-radius-base);
  --sg-alert-title-font-size: var(--sg-font-size-small);
  --sg-alert-description-font-size: var(--sg-font-size-extra-small);
  --sg-alert-close-customed-font-size: var(--sg-font-size-small);
  --sg-alert-content-padding: 0 8px;
  --sg-alert-content-title-line-height: 18px;
  --sg-alert-content-title-vertical-align: text-top;
  --sg-alert-content-description-margin: 5px 0 0;
  --sg-alert-icon-size: 12px;
  --sg-alert-icon-large-size: 20px;
  --sg-alert-close-font-size: 12px;
  --sg-alert-close-text-color: #a8abb2;
}

.sg-alert {
  width: 100%;
  padding: var(--sg-alert-padding);
  margin: 0;
  box-sizing: border-box;
  border-radius: var(--el-alert-border-radius-base);
  position: relative;
  overflow: hidden;
  opacity: 1;
  display: flex;
  background-color: var(--sg-alert-bg-color);
  align-items: center;
  transition: opacity var(--sg-transition-duration-fast);
  border-radius: var(--sg-alert-border-radius-base);
  &--center {
    justify-content: center;
  }
  &__icon {
    text-align: center;
    border-radius: var(--sg-border-radius-round-circle);
    padding: 1px;
    width: 1em;
    height: 1em;
    &--large {
      width: 24px;
      height: 24px;
    }
    &--dark {
      background-color: var(--sg-color-white);
    }
    .sg-alert__icons {
      width: 100%;
      height: 100%;
      font-size: var(--sg-alert-icon-size);
      &--large {
        font-size: var(--sg-alert-icon-large-size);
      }
      &--light {
        color: var(--sg-color-white);
      }
    }
  }
  &__content {
    color: var(--sg-alert-text-color);
    padding: var(--sg-alert-content-padding);
    .sg-alert__title {
      line-height: var(--sg-alert-content-title-line-height);
      vertical-align:  var(--sg-alert-content-title-vertical-align);
      font-size: var(--sg-alert-title-font-size);
      &.sg-alert--title-bold {
        font-weight: 700;
      }
    }
    .sg-alert__description {
      font-size: var(--sg-font-size-extra-small);
      margin: var(--sg-alert-content-description-margin);
    }
    .el-alert__close-btn {
      font-size: var(--sg-alert-close-font-size);
      position: absolute;
      top: 12px;
      right: 15px;
      cursor: pointer;
      color: var(--sg-alert-close-text-color);
    }
  }
}

@each $val in primary, success, warning, info, danger {
  .sg-alert--light {
    &.sg-alert--$(val) {
      --sg-alert-bg-color: var(--sg-color-$(val)-light-1);
      --sg-alert-text-color: var(--sg-color-$(val));
    }
  }
  .sg-alert--dark {
    &.sg-alert--$(val) {
      --sg-alert-bg-color: var(--sg-color-$(val));
      --sg-alert-text-color: var(--sg-color-white);
    }
  }
  .sg-alert {
    &__icon {
      &--light {
        &.sg-alert__icon--$(val) {
          background-color: var(--sg-color-$(val));
        }
      }
      .sg-alert__icons {
        &--dark {
          &.sg-alert__icons--$(val) {
            color: var(--sg-color-$(val));
          }
        }
      }
    }
  }
}
